<template>
    <div class="login wh100">
        <div class="login_title">欢迎使用云祭祀平台!</div>
        <van-tabs v-model="active" swipeable animated>
            <van-tab title="验证码登录">
                <van-form @submit="codeSubmit" class="code_form">
                    <van-field
                    required
                        v-model="codeForm.phone"
                        type="tel"
                        name="phone"
                        clearable
                        label="手机号"
                        :rules="[
                            { required: true, message: '请填写您的手机号码！' },
                            { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！'}
                        ]"
                        placeholder="请输入您的手机号"
                    />
                    <van-field
                        v-model="codeForm.verificationCode"
                        center
                        clearable
                        required
                        label="验证码"
                        :rules="[
                            { required: true, message: '请填写验证码！' },
                        ]"
                        placeholder="请输入短信验证码"
                        >
                        <template #button>
                            <van-button size="small" type="primary" @click="sendCode" :disabled="!disabledCodeBtn">{{btnText}}</van-button>
                        </template>
                        </van-field>
                        <van-field
                            v-model="codeForm.password"
                            :type="passwordFlag ? 'password' : 'text'"
                            name="password"
                            clearable
                            required
                            label="密码"
                            placeholder="请输入您的密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    >
                        <template slot="right-icon">
                        <van-icon :name="passwordFlag ? 'closed-eye' : 'eye-o'" @click="passwordFlag = !passwordFlag" size="20px" />
                        </template>
                    </van-field>
                    <van-field
                            v-model="codeForm.passPassword"
                            name="passPassword"
                            clearable
                            required
                            type="password"
                            label="确认密码"
                            placeholder="请输入您的确认密码"
                         @blur="checkPassword"
                         :rules="[{ required: true, message: '请填写确认密码' }]"
                         :error-message='passErrMessage'
                    />
                    <div class="codeForm_btn">
                        <van-button round block type="primary" native-type="submit">登录</van-button>
                    </div>
                    </van-form>
            </van-tab>
            <van-tab title="密码登录">
                <van-form @submit="passwordSubmit" class="password_form">
                    <van-field
                        v-model="passwordForm.username"
                        name="username"
                        label="账号"
                        clearable
                        required
                        placeholder="请输入您的账号"
                        :rules="[{ required: true, message: '请填写账号' }]"
                    />
                    <van-field
                        v-model="passwordForm.password"
                        type="password"
                        name="password"
                        clearable
                        required
                        label="密码"
                        placeholder="请输入您的密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div class="tips">
                        <div class="tips_item">
                            <router-link to='/forgetPassword'>忘记密码?</router-link>
                        </div>
                        <div class="tips_item">
                            <router-link to='/register'>注册账号</router-link>
                        </div>
                    </div>
                    <div>
                        <van-button round block type="primary" native-type="submit">登录</van-button>
                    </div>
                    </van-form>
            </van-tab>
            
        </van-tabs>
    </div>
</template>

<script>
import { login, logout } from '@/api/user'
    export default {
        name:'login',
        data() {
            return {
              active:0,//默认tab
              disabledCodeBtn: true,//验证码按钮文字
              passwordFlag:true,//密码框格式
              passwordForm:{
                  username:'',
                  password:''
              },//密码登录表单
              codeForm:{
                  phone:'',
                  verificationCode:'',
                  password:'',
                  passPassword:''
              },//手机验证登录表单
              timer:null,//定时器标识
              btnText:'发送验证码',//按钮文字
              passErrMessage:''
            }
        },
        beforeRouteEnter (to, from, next) {
            let token=localStorage.getItem('token')
            if(token){
                next(false)
            }else{
                next()
            }
      },
        methods:{
            //发送验证码
            sendCode(){
                //let res = await api.pp.sms.getVerifyCode(this.phone)
                //  用手机号向后台换取验证码，发送成功则开始调用倒计时分方法
                // if(res){
                    
                // }
                this.countDown(10)
            },
            // 倒计时方法
            countDown (time) {
                if (time === 0) {
                    this.disabledCodeBtn = true
                    this.btnText = "发送验证码"
                    return
                } else {
                    this.disabledCodeBtn = false;
                    this.btnText = '重新发送(' + time + ')'
                    time--
                }
                setTimeout(()=> {
                this.countDown(time)
                }, 1000)
            },
            //确认密码
            checkPassword(){
                if(this.codeForm.passPassword!==this.codeForm.password){
                    this.passErrMessage='确认密码和密码不一致'
                }else{
                    this.passErrMessage=''
                }
            },
            //密码登录
            async passwordSubmit(form) {
                let res= await login(form);
                console.log(res,'登录结果')
                if(res.code!==1)this.$toast.fail(res.message);
                localStorage.setItem('token',res.data.token);
                this.$router.replace('/')
                
            },
            //手机验证码登录
            async codeSubmit(){

            },
        }
    }
</script>

<style lang="scss" scoped>
.login{
 color: #fff;
 background: $defaultColor;
 display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
 -moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
 /deep/ .van-field__label{
    width: 0.8rem;
    text-align: right;
    padding-left: 0.16rem;
}
    .login_title{
        padding-left: 0.3rem;
        font-size: 20px;
        margin-bottom: 0.37rem;
        line-height: 0.28rem;
        margin-top: 0.45rem;
    }
    .van-tabs{
        flex:1;
        display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
        -moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
        color: #141414;
        /deep/ .van-tabs__nav{
            background-color: transparent;
            .van-tab{
                color: rgba(255,255,255,0.7);
            }
            .van-tab--active{
                color: rgba(255,255,255,1);
            }
            .van-tabs__line{
                background-color:#fff;
            }
          }
        /deep/ .van-tabs__content{
            height: 100%;
            flex:1;
            background: #fff;
            border-top-left-radius: 0.2rem;
            margin-top: 0.1rem;
            border-top-right-radius: 0.2rem;
            .van-tab__pane{
                height: 100%;
                padding:0.9rem 0.3rem 0;
                .password_form{
                    /deep/ .van-cell{
                        padding:0.1rem 0;
                    }
                    /deep/ .van-field__label{
                        text-align: left;
                    }
                    .tips{
                        display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
                        -moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
                        -moz-align-items: center;
-webkit-align-items: center;
align-items: center;
                        margin-bottom:0.68rem ;
                        margin-top: 0.15rem;
                    }
                }
            }
        }
    }
    .codeForm_btn{
        margin-top: 0.7rem;
    }
}
</style>